<template>
  <div class="device-content" :style="{ height: isHidden ? 'auto' : '475px' }">
    <div class="device-all">
      <div class="device-title">
        <div>
          <span
            @click="selectTab(1)"
            v-if="
              route.params.id == 'cgz' ||
              route.params.id == 'aqfh' ||
              route.params.id == 'zy' ||
              route.params.id == 'qxz'
            "
            class="tabWord"
          >
            监测点位
          </span>
          <span
            v-if="
              route.params.id == 'cwjk' ||
              route.params.id == 'lj' ||
              route.params.id === 'ddc' ||
              route.params.id === 'crk' ||
              route.params.id === 'gkpw' ||
              route.params.id === 'ryjk'
            "
            class="tabWord"
            @click="selectTab(2)"
          >
            视频设备
          </span>
        </div>
        <div class="tab-select-new" v-if="route.params.id == 'nlfx'">
          <span
            class="btn noradius"
            :class="{ active: currentTab == 1 }"
            @click="selectTab(1)"
            >监测点位{{ filteredDwlist.length }}</span
          >
          <el-divider direction="vertical" />
          <span
            class="btn nolradius"
            :class="{ active: currentTab == 2 }"
            @click="selectTab(2)"
            >视频设备{{ filteredSpdwlist.length }}</span
          >
        </div>
      </div>
      <div class="shouq" @click="toggleShow">
        {{ isHidden ? "展开" : "收起" }}

        <CaretBottom
          style="width: 1em; height: 1em; margin-right: 8px"
          v-if="isHidden"
        />
        <CaretTop
          style="width: 1em; height: 1em; margin-right: 8px"
          v-if="!isHidden"
        />
      </div>
    </div>
    <div class="table-box" v-show="!isHidden">
      <el-input
        placeholder="请输入关键字搜索"
        v-model="searchValue"
        class="input-box"
      >
        <template #append>
          <el-button :icon="Search" class="custom-icon-button" />
        </template>
      </el-input>
      <TableRandom
        v-show="currentTab == 1"
        :tableData="filteredDwlist"
        :tableColumns="tableColumns"
      ></TableRandom>
      <TableRandom
        v-show="currentTab == 2"
        :tableData="filteredSpdwlist"
        :tableColumns="spnltableColumns"
      ></TableRandom>
    </div>
  </div>
</template>

<script setup>
import TableRandom from "@/components/tableRandom.vue";
import { h, onMounted, ref, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { MinxfunCoulmns } from "./device.js";
import { getMapDevice } from "@/api/zlcj.js";
import { Search } from "@element-plus/icons-vue";
import gamePng from "@/assets/map/gamer.png";
import emitter from "@/utils/mitt";
const {
  nlcolumns,
  fjcolumns,
  cwcolumns,
  qxzcolumns,
  shhjcolumns,
  zycolumns,
  cgzcolumns,
  findSenceType,
} = MinxfunCoulmns();
const route = useRoute();

// 过滤后的表格数据
const searchValue = ref("");

const filteredDwlist = computed(() => {
  if (currentTab.value == 2) return dwlist.value;
  if (!searchValue.value) return dwlist.value;

  return dwlist.value.filter((data) => {
    // 检查所有可能包含搜索值的属性
    return Object.values(data).some((value) =>
      String(value).toLowerCase().includes(searchValue.value.toLowerCase())
    );
  });
});

const filteredSpdwlist = computed(() => {
  if (currentTab.value == 1) return spdwlist.value;
  if (!searchValue.value) return spdwlist.value;

  return spdwlist.value.filter((data) => {
    // 检查所有可能包含搜索值的属性
    return Object.values(data).some((value) =>
      String(value).toLowerCase().includes(searchValue.value.toLowerCase())
    );
  });
});

// 收起的切换
let isHidden = ref(false);
const toggleShow = () => {
  isHidden.value = !isHidden.value;
};

let currentTab = ref(1);
const selectTab = (type) => {
  currentTab.value = type;
};

// 初始化或路由变化时设置 currentTab
const setCurrentTab = () => {
  if (
    route.params.id === "cwjk" ||
    route.params.id === "lj" ||
    route.params.id === "ddc" ||
    route.params.id === "crk" ||
    route.params.id === "gkpw" ||
    route.params.id === "ryjk"
  ) {
    currentTab.value = 2;
  } else {
    currentTab.value = 1;
  }
};

// 监听路由变化
watch(
  () => route.params.id,
  () => {
    setCurrentTab();
  },
  { immediate: true }
);

// 监测点位内涝
let tableColumns = ref([]);

// // 监测点位
let dwlist = ref([{}]);
// 视频点位
let spdwlist = ref([]);

// 获取监测设备的数据
const getData = async () => {
  try {
    let { data } = await getMapDevice({
      sceneCode: await findSenceType(route.params.id),
    });
    if (route.params.id == "zy") {
      dwlist.value = data.noiseList;
    } else if (route.params.id == "cgz") {
      dwlist.value = data.cameraList;
    } else if (route.params.id == "nlfx") {
      dwlist.value = data.waterLogList;
      spdwlist.value = data.cameraList;
    } else if (route.params.id == "cwjk") {
      spdwlist.value = data.cameraList;
    } else if (route.params.id == "aqfh") {
      dwlist.value = data.cameraFireList;
    } else if (route.params.id == "lj") {
      spdwlist.value = data.cameraList;
    } else if (route.params.id == "qxz") {
      dwlist.value = data.weatherList;
    } else if (
      route.params.id === "ddc" ||
      route.params.id === "crk" ||
      route.params.id === "gkpw" ||
      route.params.id === "ryjk"
    ) {
      spdwlist.value = data.cameraList;
    }
  } catch (e) {
    console.error(e);
  }
};
let spnltableColumns = ref([
  {
    label: "序号",
    prop: "xh",
    type: "index",
    width: "60",
  },
  {
    label: "视频设备",
    prop: "deviceName",
  },
  {
    label: "查看视频",
    prop: "cameraState",
    format: true,
    width: "120",
    render: (row) =>
      h("img", {
        src: gamePng,
        style: { width: "20px", height: "18px", "margin-top": "4px" },
        onClick: (e) => handleSpanClickDirect(e, row),
      }),
  },
]);
// if (route.params.id == "cwjk") {
//   spnltableColumns = ref([
//     {
//       label: "序号",
//       prop: "xh",
//       type: "index",
//     },
//     {
//       label: "视频设备",
//       prop: "deviceName",
//     },
//     {
//       label: "查看视频",
//       prop: "cameraState",
//       format: true,
//       render: (row) =>
//         h("img", {
//           src: gamePng,
//           style: { width: "20px", height: "18px", "margin-top": "4px" },
//           onClick: (e) => handleSpanClickDirect(e, row),
//         }),
//     },
//   ]);
// } else {
//   spnltableColumns = ref([
//     {
//       label: "序号",
//       prop: "xh",
//       type: "index",
//     },
//     {
//       label: "监控点",
//       prop: "deviceName",
//     },
//     {
//       label: "所属区域",
//       prop: "tagLable",
//     },
//     {
//       label: "设备状态",
//       prop: "cameraState",
//       format: true,
//       render: (row) =>
//         h(
//           "span",
//           {
//             class: row.cameraState == "在线" ? "online-span" : "liveline-span",
//             onClick: (e) => handleSpanClickDirect(e, row),
//           },
//           row.cameraState
//         ),
//     },
//   ]);
// }
// console.log("chuanru ", spnltableColumns);
const handleSpanClickDirect = (e, row) => {
  e.stopPropagation();
  console.log("直接点击处理:", row);
  // 处理点击逻辑
  emitter.emit("playMapVideo", row);
};

// 获取表格列
const getCol = () => {
  let type = route.params.id;
  switch (type) {
    case "nlfx":
      tableColumns.value = nlcolumns;
      break;
    case "aqfh":
      tableColumns.value = fjcolumns;
      break;
    case "cwjk":
      tableColumns.value = cwcolumns;
      break;
    case "qxz":
      tableColumns.value = qxzcolumns;
      break;
    case "shhj":
      tableColumns.value = shhjcolumns;
      break;
    case "zy":
      tableColumns.value = zycolumns;
      break;
    case "cgz":
      tableColumns.value = cgzcolumns;
      break;
    default:
      break;
  }
};

onMounted(() => {
  setCurrentTab();
  getCol();
  getData();
});
</script>
<style scoped>
/* 使用 :deep() 穿透作用域 */
:deep(.custom-icon-button .el-icon) {
  color: #ffffff !important;
  font-size: 16px !important;
}
</style>
<style lang="scss">
.device-content {
  padding: 14px 20px;
  position: absolute;
  left: 20px;
  top: 40px;
  min-width: 450px;
  // width: 450px;
  height: 450px;
  // height: 42%;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.3);
  border-radius: 12px;
  .el-table .cell {
    font-size: 12px;
  }
  .device-all {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shouq {
      cursor: pointer;
      margin-left: 10px;
      font-weight: 500;
      font-size: 14px;
      color: #2263bf;
      line-height: 20px;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
    }
  }
  .tabWord {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    letter-spacing: 1px;
  }
  .table-box {
    margin-top: 20px;
    .input-box {
      margin-bottom: 20px;
      width: 220px;
      .el-input__inner {
        font-size: 12px;
      }
    }
    .el-input-group__append {
      background: #2263bf;
    }

    thead {
      .el-table__cell {
        background: rgba(142, 191, 255, 0.22);
        color: #333333;
        border-color: rgba(142, 191, 255, 0.22);
      }
    }
    .el-table table {
      border-spacing: 0 0px;
    }
  }
  .el-scrollbar__wrap {
    background: #fff !important;
  }
  .online-span {
    color: #39aa92;
  }
  .liveline-span {
    color: #da5a5a;
  }
}
</style>
